<template>
   <van-dialog v-model="visible" @cancel='visible = false' title='培训缴费'
    @confirm='submit'
     show-cancel-button
    :before-close='(action, done)=>{
        if(action=="confirm"){
            done(false)
        }else{
            done()
        }
    }'
    ref="vandialog"
    v-loading='loading'
    confirm-button-text='确认缴费'
    >
        <div style="width:100%;padding:12px;">
            <div class="fromitem">
                <span>身份证号</span>
                <el-input placeholder="请输入身份证号" v-model="mumber" class="input">
                    <el-button slot="append" @click="sacth">查询科目</el-button>
                </el-input>
            </div>
            <div class="fromitem" v-if="options.length!=0">
                <span>培训科目</span>
                <el-select v-model="value" placeholder="请选择您要缴费的科目" class="input">
                    <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.subjectTitle"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
        </div>
        <!-- <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="submit">培训缴费</el-button>
        </span> -->
    </van-dialog>
</template>

<script>
import{getapplyInfor,mpo}from'@/api/apply.js'
import {mapGetters} from 'vuex'
import {setapplyid,delapplyid} from'@/utils/cookie.js'
export default {
    computed:{
        ...mapGetters(['init','http'])
    },
    props:['openid'],
    data() {
        return {
            visible:false,
            mumber:'',
            options:[],
            loading:false,
            value:'',
            setting:{},
        }
    },
    methods: {
        submit(mumber,value){
            if(mumber){
                this.setting = JSON.parse(this.init.setting)
                this.mumber=mumber
                this.value=value
            }
            let setting = this.setting
            if(!this.mumber){
                this.$toast.fail('身份证号不能为空') 
                return 
            }
            if(!this.value){
                this.$toast.fail('培训科目不能为空') 
                return 
            }
            if(setting.payType=='H5'){
                window.open(this.http+'/index/apply/mph5?applyid='+this.value)
            }else{
                if(!navigator.userAgent.match(/MicroMessenger/i)){
                    return this.$toast.fail('请在微信中打开')
                }
                mpo({
                    applyid:this.value,
                    openid:this.openid
                }).then(resp=>{
                    if(resp.code==200){
                        WeixinJSBridge.invoke(
                        'getBrandWCPayRequest',resp.data,
                        res=>{
                            this.visible=false
                            if(res.err_msg == "get_brand_wcpay_request:ok" ){
                                setapplyid(this.value)
                                this.$toast.success('支付成功');
                                location.reload();
                            }else{
                                delapplyid()
                                this.$toast.fail('支付失败');
                            }
                        }
                        )
                    }else{
                        delapplyid()
                        // this.$toast.fail(resp.msg)   
                    }
                })
            }
        },
        open(){
            this.visible=true
            this.setting = JSON.parse(this.init.setting)
        },
        sacth(){
            let IDCard = /^[1-9]\d{5}(17|18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$/; //身份证号校验
            if(!this.mumber){
                this.$toast.fail('身份证号不能为空') 
                return 
            }
            if(!IDCard.test(this.mumber)){
                this.$toast.fail('身份证号不合法') 
                return 
            }
            this.loading=true
            getapplyInfor({username:this.mumber}).then(res=>{
                this.loading=false
                if(res.code==200){
                    if(res.data.length==0){
                        this.$confirm('该身份证号所报名的培训科目已缴费，请到学员端登录学习','提示',{
                            confirmButtonText: '去登录',
                            cancelButtonText: '取消',
                            type: 'warning',
                            showClose:false,
                        }).then(()=>{
                            window.open(this.http+'/user','_self')
                        }).catch(()=>{})  
                    }else{
                      this.options = res.data
                    }
                }
            })  
        }
    },
}
</script>
<style lang="scss">
    body{
        .el-select-dropdown{
            z-index: 2100 !important;    
        }
    }
</style>
<style lang="scss" scoped>
    .fromitem{
        display: flex;
        width: 100%;
        align-items: center;
        margin-bottom:16px;
        span{
            display: inline-block;
            width:20vw;
            font-weight: 600;
            // font-size: 16px;
        }
        .input{
            // flex:1;
            width:calc(100% - 20vw);
        }
    }
    ::v-deep{
        .van-cell{
            // font-weight: 600;
            padding: 0 !important;
            .van-field__label{
                margin: 0 !important;
                font-weight: 600;
                font-size: 16px;
            }
        }
        
    }
</style>